<template>
  <div>
    <el-form ref="queryCondition" :model="queryCondition" label-width="auto">
      <el-row :gutter="12">
        <el-col :span="4" :offset="1">
          <el-form-item prop="shoppingState" label="单据状态">
            <el-select
              v-model.trim="queryCondition.shoppingState"
              @change="queryByCondition()"
            >
              <template v-for="(e, i) in this.$store.state.shoppingStateEnums">
                <el-option :label="e.label" :value="e.value" :key="i">
                </el-option>
              </template>
              <el-option :value="null" label="..."></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="amountMin" label="金额最小">
            <el-input-number v-model="queryCondition.amountMin">
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="amountMax" label="金额最大">
            <el-input-number v-model="queryCondition.amountMax">
            </el-input-number>
          </el-form-item>
        </el-col>

        <el-col :span="2">
          <el-form-item label-width="10px">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="queryByCondition(1)"
              >查询
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="1">
          <el-form-item label-width="0">
            <el-button
              type="warning"
              icon="el-icon-refresh"
              @click="() => $refs.queryCondition.resetFields()"
            >
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-button type="primary" @click="$refs.insert.appear()">新增</el-button>
    </el-row>
    <el-table
      :data="results"
      ref="resultsTable"
      height="480px"
      stripe
      highlight-current-row
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" align="center"></el-table-column>

      <el-table-column type="expand">
        <template #default="{ row }">
          <template v-for="(e, i) in row.shoppingBillItems">
            <el-descriptions :key="i" border size="small">
              <el-descriptions-item
                label="物品名称"
                label-class-name="el-descr-label"
                content-class-name="el-descr-content"
                >{{ e.goodsName }}</el-descriptions-item
              >
              <el-descriptions-item
                label="物品单价"
                label-class-name="el-descr-label"
                content-class-name="el-descr-content"
                >{{ e.goodsPrice }}</el-descriptions-item
              >
              <el-descriptions-item
                label="物品数量"
                label-class-name="el-descr-label"
                content-class-name="el-descr-content"
                >{{ e.quantity }}</el-descriptions-item
              >
            </el-descriptions>
          </template>
        </template>
      </el-table-column>

      <el-table-column
        prop="shoppingBillCode"
        label="ID/Code"
      ></el-table-column>

      <el-table-column
        label="shoppingState"
        :formatter="shoppingStateFormat"
        align="center"
      >
      </el-table-column>
      <el-table-column label="bill-state" align="center">
        <template #default="{ row }">
          <el-tag :type="stateColor(row)">{{ stateContent(row) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" prop="amount"> </el-table-column>
      <el-table-column label="审核人" prop="auditor"> </el-table-column>
      <el-table-column label="供方公司" prop="supplyCompany"> </el-table-column>
      <el-table-column width="180px" fixed="left" label="修改-提交-废弃">
        <template #default="{ row }">
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-document"
            @click="modifyById(row.shoppingBillCode)"
          ></el-button>
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-document-checked"
            @click="submitById(row.shoppingBillCode)"
          ></el-button>
          <el-button
            size="mini"
            type="info"
            icon="el-icon-document-delete"
            @click="abandonById(row.shoppingBillCode)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :total="total"
      :page-size="queryCondition.pageSize"
      :current-page.sync="queryCondition.pageNum"
      @current-change="queryByCondition"
      layout="total, prev, pager, next, jumper"
    ></el-pagination>
    <shopping-insert
      ref="insert"
      @post-submit="queryByCondition(1)"
    ></shopping-insert>
    <shopping-modify ref="modify" @post-submit="queryByCondition(1)">
    </shopping-modify>
  </div>
</template>
<script>
import ShoppingInsert from "@/components/ShoppingInsert";
/**
 * 页面核心数据结构体说明文档
 *{
  "content": [
    {
      "shoppingBillCode": "SH86380509163945",
      "shoppingBillItems": [
        {
          "shoppingBillFk": "SH86380509163945",
          "itemIndex": 1,
          "goodsCode": "MT001",
          "goodsName": "游标卡尺",
          "goodsPrice": 12,
          "quantity": 2
        },
        {
          "shoppingBillFk": "SH86380509163945",
          "itemIndex": 2,
          "goodsCode": "MT002",
          "goodsName": "天平",
          "goodsPrice": 60,
          "quantity": 2
        }
      ],
      "amount": 0,
      "updateTime": "2022-05-09T08:39:45.056",
      "abandon": false,
      "supplyCompany": "蓝天供销社",
      "submitter": "anonymousUser",
      "submitTime": null,
      "shoppingState": "toSubmit",
      "auditor": "anonymousUser",
      "auditScore": -1,
      "resubmitTimes": 0
    },
 *
 */
// import New from './components/New.vue';
import mixinShoppingState from "@/components/mixinShoppingState";
import ShoppingModify from "@/components/ShoppingModify";
import { basic } from "@/api";

export default {
  name: "ShoppingSubmitter",
  components: {
    ShoppingModify,
    ShoppingInsert,
    // New,Old,
  },
  mixins: [mixinShoppingState],
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      rules: {
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      queryCondition: {
        shoppingState: null,
        amountMax: 0,
        amountMin: 0,

        pageNum: 1,
        pageSize: 8,
      },
      total: 0,
      results: [],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {
    this.queryByCondition(1);
  },
  methods: {
    sampleM() {},
    selectionChange() {},

    queryByCondition(pageNum) {
      if (pageNum) this.queryCondition.pageNum = pageNum;
      //todo: arrange into apis
      /*      this.$http({
        method: "post",
        url: "http://localhost:9090/swimming/shopping/query4submitter",
        data: this.queryCondition,
      })*/
      basic.query4submitter(this.queryCondition).then(
        (res) => {
          this.total = res.data.total;
          this.results = res.data.results;
        },
        (error) => {
          this.$message.warning("query error: " + error.response.status);
        }
      );
    },
    shoppingStateFormat(row) {
      return row.shoppingState;
    },
    modifyById(id) {
      this.$message.warning("Debug id :" + JSON.stringify(id));
      this.$refs.modify.appear(id);
    },
    submitById(id) {
      this.$message.warning("Debug id :" + JSON.stringify(id));
      this.$confirm("确实要进行？").then(() => {
        /*this.$http({
          method: "put",
          url: `http://localhost:9090/swimming/shopping/submit/${id}`,
        }).*/
        basic.submit(id).then(
          (res) => {
            this.$message.warning(JSON.stringify(res.data));
            this.queryByCondition();
          },
          (error) => {
            console.log(" request error : " + error.response.status);
          }
        );
      });
    },
    abandonById(id) {
      this.$message.warning("Debug id :" + JSON.stringify(id));
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-descriptions {
  width: 80%;
  margin-left: 200px;
  ::v-deep .el-descr-label {
    width: 64px;
    //background-color: #42b983;
  }
  ::v-deep .el-descr-content {
    width: 120px;
    //background-color: indianred;
  }
}
</style>
